import { ApplicationType } from '@/datatypes/application/data.d.ts';
import { queryApplicationList } from '@/services/application';
import { DownloadOutlined, EditOutlined, ShareAltOutlined } from '@ant-design/icons';
import { useRequest } from '@umijs/max';
import { Avatar, Card, List, Tooltip } from 'antd';
import React from 'react';
import useStyles from './index.style';

const Applications: React.FC = () => {
  const { styles: stylesApplications } = useStyles();
  const { data: listData } = useRequest(() => {
    return queryApplicationList();
  });

  return (
    <List<ApplicationType>
      rowKey="id"
      className={stylesApplications.filterCardList}
      grid={{
        gutter: 24,
        xxl: 3,
        xl: 2,
        lg: 2,
        md: 2,
        sm: 2,
        xs: 1,
      }}
      dataSource={listData?.list || []}
      renderItem={(item) => (
        <List.Item key={item.id}>
          <Card
            hoverable
            actions={[
              <Tooltip key="download" title="下载">
                <DownloadOutlined />
              </Tooltip>,
              <Tooltip title="编辑" key="edit">
                <EditOutlined />
              </Tooltip>,
              <Tooltip title="分享" key="share">
                <ShareAltOutlined />
              </Tooltip>,
            ]}

            styles={{body: { paddingBottom: 20 }}}
          >
            <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
          </Card>
        </List.Item>
      )}
    />
  );
};
export default Applications;
